<template>
  <div id="edit">
    <h1 class="con-right-title">新增落地页</h1>
    <div class="form-box container">
      <el-form
        ref="ruleForm"
        :rules="rules"
        :model="formData"
        label-width="auto"
      >
        <el-form-item label="落地页名称：" prop="name">
          <el-input
            :disabled="isDisabled"
            maxlength="20"
            style="width:20%"
            v-model="formData.name"
          ></el-input>
        </el-form-item>
        <el-form-item label="设置落地页背景：">
          <el-radio-group v-model="formData.background">
            <el-radio
              v-for="item in backgroundType"
              :key="item.value"
              :label="item.value"
              >{{ item.label }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <!-- 纯色 -->
        <el-form-item v-show="formData.background === 'pureColour'">
          <el-color-picker v-model="formData.color" show-alpha>
          </el-color-picker>
        </el-form-item>
        <!-- 背景图 -->
        <el-form-item
          v-if="formData.background === 'backgroundImg'"
          prop="backgroundImg"
        >
          <uploadSingImg
            :imgUrl="formData.backgroundImg"
            accept=".jpg,.jpeg,.png"
            :maxSize="10"
            @getImgUrl="getImgUrl"
          >
            <template v-slot:imgInfo>
              (建议上传图片尺寸 宽750px 高不低于1624px, png jpg格式,尺寸最大10M)
            </template>
          </uploadSingImg>
        </el-form-item>

        <el-form-item
          v-for="(item, index) in modules"
          :key="item.name"
          :label="item.lable"
        >
          <layout :layoutData="item" :ref="`layout${index}`">
            <template slot-scope="{ itemInfo }">
              <component
                :ref="item.name"
                :is="item.module"
                :itemInfo="itemInfo"
              ></component>
            </template>
          </layout>
        </el-form-item>
      </el-form>
    </div>
    <div class="handleButton">
      <el-button type="success" plain @click="cancle">取 消</el-button>
      <el-button type="success" @click="toView('ruleForm')">预 览</el-button>
    </div>
  </div>
</template>
<script>
import layout from './module/layout'
import bannerConfig from './module/bannerConfig' //banner
import uploadVideo from './module/uploadVideo' //视频
import inputQuantity from './module/inputQuantity'
import countdown from './module/countdown' //倒计时
import actionButton from './module/actionButton' //功能按钮
import marquee from './module/marquee' //跑马灯
import floatButton from './module/floatButton' //悬浮按钮
import setUpText from './module/setUpText' //文本
import preachImg from './module/preachImg' //宣传图
import uploadSingImg from '@common/uploadSingImg'
import { clearTagMixins } from '@/mixins/clearTag'
import {
  addLandingPage,
  landingPageDetail,
  editLandingPage
} from '@/api/activityCenter/landingPage'
export default {
  mixins: [clearTagMixins],
  components: {
    layout,
    bannerConfig,
    uploadVideo,
    inputQuantity,
    countdown,
    actionButton,
    marquee,
    floatButton,
    setUpText,
    preachImg,
    uploadSingImg
  },
  data() {
    return {
      formData: {
        name: '',
        background: 'pureColour',
        color: 'rgba(255, 69, 0, 1)',
        backgroundImg: '',
        cardInfoList: []
      },
      isDisabled: false,
      backgroundType: [
        { label: '纯色', value: 'pureColour' },
        { label: '背景图', value: 'backgroundImg' }
      ],
      modules: [
        {
          name: 'bannerConfig',
          lable: '设置banner：',
          button: '新增banner位',
          module: bannerConfig,
          cardList: []
        },
        {
          name: 'uploadVideo',
          lable: '上传视频：',
          button: '新增视频位',
          module: uploadVideo,
          cardList: []
        },
        {
          name: 'inputQuantity',
          lable: '设置入量框：',
          button: '新增入量框位',
          module: inputQuantity,
          cardList: []
        },
        {
          name: 'countdown',
          lable: '设置倒计时：',
          button: '新增倒计时位',
          module: countdown,
          cardList: []
        },
        {
          name: 'actionButton',
          lable: '设置功能按钮：',
          button: '新增功能按钮位',
          module: actionButton,
          cardList: []
        },
        {
          name: 'marquee',
          lable: '设置跑马灯：',
          button: '新增跑马灯位',
          module: marquee,
          cardList: []
        },
        {
          name: 'floatButton',
          lable: '设置悬浮按钮：',
          button: '',
          module: floatButton,
          cardList: [
            {
              id: new Date().getTime(),
              name: 'floatButton',
              sort: '',
              imgUrl: '',
              mediaImg: '',
              action: 'LINK',
              link: ''
            }
          ]
        },
        {
          name: 'setUpText',
          lable: '设置文本：',
          button: '新增文本',
          module: setUpText,
          cardList: []
        },
        {
          name: 'preachImg',
          lable: '设置宣传图位：',
          button: '新增宣传图位',
          module: preachImg,
          cardList: []
        }
      ],
      rules: {
        name: [
          { required: true, message: '请填写落地页名称', trigger: 'blur' }
        ],
        backgroundImg: [
          { required: true, message: '请上传落地页背景', trigger: 'change' }
        ]
      }
    }
  },
  mounted() {
    if (!this.$route.query.id) {
      this.$store.commit('landingPage/initSorts', [])
    }
    if (this.$route.query.id) {
      landingPageDetail(this.$route.query.id, {}, (res) => {
        const config = JSON.parse(res.config)
        this.formData = config
        this.isDisabled = res.startDate !== null && this.$route.query.type === 'edit'
        let arr = []
        config.cardInfoList.forEach((item) => {
          this.modules.forEach((val) => {
            if (val.name === item.name) {
              if (val.name === 'floatButton') val.cardList = [item]
              else val.cardList.push(item)
            }
          })
          const { id } = item
          const sort = Number(item.sort)
          arr.push({ id, sort })
        })
        this.$store.commit('landingPage/initSorts', arr)
      })
    }
  },
  methods: {
    /* 背景图 */
    getImgUrl(url) {
      this.formData.backgroundImg = url
      this.$refs['ruleForm'].validateField('backgroundImg')
    },
    arrangeData() {
      this.formData.cardInfoList = []
      this.modules.forEach((item, index) => {
        const res = this.$refs[`layout${index}`].some((val) => {
          return val.validateData() === false
        })
        if (this.$refs[item.name]) {
          this.$refs[item.name].forEach((val) => {
            if (res) {
              val.collectData()
              this.formData.cardInfoList.push(false)
            } else {
              this.formData.cardInfoList.push(val.collectData())
            }
          })
        }
      })
    },
    /* 预览 */
    toView() {
      this.arrangeData()
      const res = this.formData.cardInfoList.some((item) => item === false)
      this.$refs['ruleForm'].validate((valid) => {
        if (valid && !res) {
          const { name } = this.formData
          const config = JSON.stringify(this.formData)
          const obj = { name, config }
          this.addEdit(obj)
        }
      })
    },
    /* 新增编辑 */
    addEdit(obj) {
      const { id, type } = this.$route.query
      if (!type || type === 'copy') {
        addLandingPage(obj, () => {
          this.$message.success('添加成功')
          this.$router.push({ name: 'wh:activityCenter:landingPage' })
        })
      } else if (type === 'edit') {
        obj.id = id
        editLandingPage(id, obj, () => {
          this.$message.success('保存成功')
          this.$router.push({ name: 'wh:activityCenter:landingPage' })
        })
      }
    },
    /* 取消 */
    cancle() {
      this.clearTag()
    },
    /*退出*/
    signOut() {
      this.$router.push({ name: 'wh:activityCenter:landingPage' })
    }
  }
}
</script>
<style lang="less" scoped>
.handleButton {
  width: 120px;
  margin: 30px auto;
}
</style>
